<template>
  <div class="stackBar-wrap" :style="{ width: width, height: height }">
    <div class="stackBar" ref="stackBar"></div>
  </div>
</template>

<script>
/* eslint-disable */
import echarts from "echarts";
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    formatter: {
      type: String,
      default: () => "",
    },
    dataZoom: {
      type: Array,
      default: () => [
        {
          type: "slider",
          show: false,
          start: 0,
          end: 100,
        },
      ],
    },
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    isShowLegend: {
      type: Boolean,
      default: false,
    },
    legend: {
      type: Array,
      default: () => [],
    },
    xAxis: {
      type: Array,
      default: () => [],
    },
    grid: {
      type: Object,
      default: () => {
        return {
          left: "4%",
          right: "4%",
          top: "14%",
          bottom: "4%",
          y2: 30,
          containLabel: true,
        };
      },
    },
    value: {
      type: Array,
      default: () => [],
    },
    colors: {
      type: Array,
      default: () => [
        "rgba(255, 131, 105, 1)",
        "rgba(153, 55, 221, 1)",
        "rgba(76, 177, 220, 1)",
        "#47a9e1",
        "#9bd5e8",
      ],
    },
    itemStyle: {
      default: () => {
        return {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#8554FE", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#5863FE", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          // barBorderRadius: [20, 20, 0, 0],
        };
      },
    },
  },
  data() {
    return {
      option: null,
      chart: null,
      ylabel: [0, 30, 60, 90, 120, 150],
      max: 90,
      maxValue: 0,
    };
  },
  computed: {
    valueRevert() {
      // 先求最大值
      let maxValue = 0;
      this.value.forEach((item, index) => {
        if (maxValue <= item) {
          maxValue = item;
        }
      });
      this.maxValue = maxValue
      let arr = this.value.map((item, index) => {
        if (item <= 15) {
          return ((Number(maxValue) / 5) * (Number(item) / 10)).toFixed(0);
        } else {
          return item;
        }
      });
      return arr;
    },
    // dir() {
    //   let arr = this.value.map((elv, elix) => {
    //     if (elix == 0) {
    //       return 0;
    //     } else if (elv >= this.ylabel[0] && elv <= this.ylabel[1]) {
    //       return 10;
    //     } else if (elv > this.ylabel[1] && elv <= this.ylabel[2]) {
    //       return 20;
    //     } else if (elv > this.ylabel[2] && elv <= this.ylabel[3]) {
    //       return 30;
    //     } else {
    //       return this.max;
    //     }
    //   });
    //   return Array.from(new Set(arr));
    // },
  },
  watch: {
    value() {
      this.setOptions();
    },
  },
  methods: {
    setOptions() {
      const _this = this;
      this.option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow",
          },
          formatter: function(params) {
            if (_this.formatter != "") {
              return (
                params[0].name + "<br/>" + params[0].value + _this.formatter
              );
            } else {
              // return params[0].name + "<br/>" + params[0].value;
              let str = params[0].name;
              params.forEach((item) => {
                str += `<br/>${item.seriesName}:${
                  _this.valueRevert ? _this.value[item.dataIndex] : ""
                }`;
              });
              return str;
            }
          },
        },
        title: {
          show: false,
        },
        color: this.colors,
        legend: {
          show: true,
          icon: "rect",
          top: "0%",
          left: "center",
          itemWidth: 15,
          itemHeight: 15,
          // itemGap: 25,
          data: this.legend,
          textStyle: {
            fontSize: 14,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        grid: this.grid,
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            // color: "#ffffff",
            // fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(54, 61, 82, 1)",
              width: 1,
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: this.xAxis,
        },
        yAxis: {
          type: "value",
          min: 0,
          splitNumber: 5,
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: (v, index) => {
              if (this.name == "chart01") {
                // 数据映射处理
                if (index == 1 && this.maxValue > 10) {
                  return 10;
                }else {
                  return v;
                }
              } else {
                if (_this.formatter != "") {
                  return v + _this.formatter;
                } else {
                  return v;
                }
              }
            },
          },
        },
        dataZoom: _this.dataZoom,
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "20px",
            barCategoryGap: "10%",
            itemStyle: { normal: this.itemStyle },
            // label: {
            //   show: false,
            //   fontSize: 12,
            //   position: "inside",
            // },
            data: this.valueRevert,
          },
        ],
      };
      // for (var i = 0; i < this.legend.length; i++) {
      //   this.option.series.push({
      //     name: this.legend[i],
      //     type: "bar",
      //     barWidth: "20px",
      //     barCategoryGap: "10%",
      //     itemStyle: { normal: this.itemStyle[i] },
      //     label: {
      //       show: false,
      //       fontSize: 12,
      //       position: "inside",
      //     },
      //     data: this.value[i],
      //   });
      // }
      this.chart.setOption(this.option);
    },
    //调用图表切换legend
    toggleLegend(toggleIndex) {
      this.chart.dispatchAction({
        type: "legendToggleSelect",
        // 图例名称
        name: this.legend[toggleIndex].name,
      });
    },
    //图表全选
    legendAllSelect() {
      this.chart.dispatchAction({
        type: "legendAllSelect",
      });
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.stackBar);
    window.onresize = () => {
      this.chart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.stackBar-wrap {
  width: 100%;
}
.stackBar {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>
